<template>
  <div>
    <nav-header @add="add" />
    <nav-main :list="list" />
    <nav-footer :list="list" />
  </div>
</template>

<script>
import NavHeader from '@/components/navHeader/NavHeader'
import NavMain from '@/components/navMain/NavMain'
import NavFooter from '@/components/navFooter/NavFooter'
import { defineComponent, ref, computed } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'Home',
  components: {
    NavHeader,
    NavMain,
    NavFooter
  },
  setup () {
    let store = useStore()
    let list = computed(() => {
      return store.state.list
    })
    // 添加任务
    let add = (val) => {
      // 过滤重复
      let flag = true
      // 拿到的计算属性的值，和ref定义的变量是一样的，取值时需要加上value
      list.value.map(item => {
        if (item.title == val) {
          flag = false
          alert('任务已存在')
        }
      })

      if (flag) {
        store.commit('addTodo', {
          title: val,
          complete: false
        })
      }
    }

    return {
      add,
      list
    }
  }
})
</script>

<style lang="scss" scoped>
</style>